<script setup lang="ts">
import { AssetsItem, usePanState } from "./provider";

const state = usePanState();
const { currentAsset } = state;

const getRowTitle = (asset: AssetsItem) => asset.getTitle();
const getRowKey = (asset: AssetsItem) => asset.getKey();
const getRowSize = (asset: AssetsItem) => asset.getSize();
const getRowModTime = (asset: AssetsItem) => asset.getModTime();
</script>

<template>
  <el-table :data="currentAsset.children" table-layout="fixed">
    <el-table-column label="名称">
      <template #default="scope">
        <span>{{ getRowTitle(scope.row) }}</span>
      </template>
    </el-table-column>
    <el-table-column label="大小" width="180">
      <template #default="scope">
        <span>{{ getRowSize(scope.row) }}</span>
      </template>
    </el-table-column>
    <el-table-column label="创建时间" width="180">
      <template #default="scope">
        <span>{{ getRowModTime(scope.row) }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>
<style lang="scss" scoped>
.asset-list {
  width: 100%;
}
</style>
